<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Judge</title>

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="../static/layui/jquery-3.7.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../static/layui/layui.js"></script>

    <link href="../static/layui/css/layui.css" rel="stylesheet">

    <script src="../static/assets/js/color-modes.js"></script>
    <link href="../static/assets/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="//unpkg.com/layui@2.9.10/dist/css/layui.css" rel="stylesheet">




    <link rel="stylesheet" href="../static/assets/vendors/mdi/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="../static/assets/vendors/css/vendor.bundle.base.css">
    <!-- endinject -->
    <!-- plugin css for this page -->
    <!-- End plugin css for this page -->
    <!-- inject:css -->
    <link rel="stylesheet" href="../static/assets/css/style.css">
    <!-- endinject -->
    <link rel="shortcut icon" href="../static/assets/images/favicon.ico" />















    <style>
        /* 起手式, 100%保证我们的样式设置可以不受默认影响 */


        /* html,
        body {
            width: 100%;
            height: 100%;
        } */
        .container .question_list {
            padding-top: 10px;
            width: 780px;
            height: 100%;
            margin: 0px auto;

            text-align: center;
        }

        .btn2 {
            /* Login */
            display: inline-block;
            background-color: #333;
            color: #acacac;
            text-decoration: none;
        }

        /* 表头 */
        .layui-table-cell th {
            font-size: 30px !important;


        }

        /* 表体样式 */
        .layui-table td,
        .layui-table th {
            text-align: center;
            font-size: 20px !important;
            background-color: #cccccc;
        }


        .gradient-text {
            background: linear-gradient(to right, #ff0101, #e1ff00);
            /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
            -webkit-background-clip: text;
            /*将设置的背景颜色限制在文字中*/
            -webkit-text-fill-color: transparent;
            /*给文字设置成透明*/

        }

        .section-hero {

            background: url(../static/img/test.jpg) no-repeat;

        }
    </style>

</head>

<body>
    <script src="//unpkg.com/layui@2.9.10/dist/layui.js"></script>



    <!--   <div >
        <div class="container">
            <div class="question_list">
                <h1 class="gradient-text">OnlineJuge题目列表</h1>
                
                <table class="layui-hide  layui-table-cell" id="test"></table>
            </div>
        </div>
    </div> -->


    <div class="col-lg-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <h2 style="text-align:center;">题目列表</h2>
                <p class="card-description" style="text-align:center;">
                    Online_Judge based on <code>Linux.c++14</code>
                </p>
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead style="text-align: center;">
                            <tr>
                                <th>
                                    编号
                                </th>
                                <th>
                                    题目
                                </th>
                                <th>
                                    难度
                                </th>
                                
                                <th>
                                    时间限制
                                </th>
                                <th>
                                    空间限制
                                </th>

                                <th>
                                    通过率
                                </th>
                            </tr>
                        </thead>
                        <tbody style="text-align: center;">


                            {{#question_list}}
                            <tr>
                                <td class="py-1">
                                    {{number}}
                                </td>

                                <td style="width: 15%;">
                                    <a href="/question/{{number}}">{{title}}</a>
                                </td>

                                <td>
                                    {{star}}
                                </td>

                                <td style="width: 7%;">
                                    {{cpu_limit}}&nbsp;s
                                </td>
                                
                                <td>
                                    {{mem_limit}}&nbsp;KB
                                </td>
                            
                                <td>
                                    <!-- <div class="progress">
                                        <div class="progress-bar bg-success" role="progressbar" style="width:25%"
                                            aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div> -->
                                    <div class="layui-progress layui-progress-big" lay-showpercent="true">
                                        <div class="layui-progress-bar {{bg_color}} " lay-percent="{{success_count}}%"></div>
                                      </div>
                                </td>

                            </tr>

                            {{/question_list}}

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>







    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/layui@2.9.10/dist/layui.js"></script>
    <!-- <script>
        layui.use('table', function () {
            var table = layui.table;

            // 已知数据渲染
            var inst = table.render({
                elem: '#test',
                method: 'Get',
                url: '/TableData',

                cols: [[ //标题栏
                    { field: 'id', title: '编号', width: 120, sort: true },
                    {
                        field: 'title', title: '题目', width: 300, templet: function (d) {
                            //console.log(d); // 得到当前行数据
                            //   console.log(this); // 得到表头当前列配置项
                            //   console.log(d.LAY_NUM); // 得到序号。或其他特定字段

                            // 返回模板内容
                            return '<a href="/question/' + d.id + '" class="layui-table-link">' + d.title + '</a>'
                            //   function(d){
                            //       return  '<a href="/question/d.id" target="_blank">d.title</a>';
                            //       //return '<span style="color: blue">♂</span>';
                        }
                    },
                    { field: 'star', title: '难度', width: 120 },
                    { field: 'time_limit', title: '时间限制', width: 120 },
                    { field: 'mem_limit', title: '空间限制', width: 120 },

                ]],

                //skin: 'line', // 表格风格
                //even: true,
                page: true, // 是否显示分页
                limits: [5, 10, 15],
                limit: 15 // 每页默认显示的数量
            });
        });


        form.on('switch(demo-templet-status)', function (obj) {
            var id = this.value;
            var name = this.name;
            layer.tips(id + ' ' + name + ': ' + obj.elem.checked, obj.othis);
        });
    </script> -->
    <!-- <table>
        <tr>
            <th>编号</th>
            <th>标题</th>
            <th>难度</th>
        </tr>
        {{#question_list}}
        <tr>
            <td>{{number}}</td>
            <td><a href="/question/{{number}}">{{title}}</a></td>
            <td>{{star}}</td>
        </tr>
        {{/question_list}}
    </table> -->


    <script src="../static/assets/vendors/js/vendor.bundle.base.js"></script>
    <!-- endinject -->
    <!-- Plugin js for this page-->
    <!-- End plugin js for this page-->
    <!-- inject:js -->
    <script src="../static/assets/js/off-canvas.js"></script>
    <script src="../static/assets/js/hoverable-collapse.js"></script>
    <script src="../static/assets/js/template.js"></script>
    <script src="../static/assets/js/settings.js"></script>
    <script src="../static/assets/js/todolist.js"></script>




</body>

</html>